
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="shortcut icon" href="images/ico.png" >
</head>
<style>
    body{
        background-color: rgb(246, 246, 246);
    }
    *{
        margin: 0;
        padding: 0;
    }
    
    /* 通栏 */
    #total1{
        
        height: 100%;
        position: relative;
        left: 0;
        right: 0;
        margin: 0 auto;
        /* background-color: rgb(255, 243, 226); */
        /* box-shadow: 0px 2px 2px #ddd; */
     }
    ul{
        list-style: none;
        margin-left: 40px;
        /* margin-left: 300px; */
        /* line-height: 40px; */
    } 
    
    #total{
        height: 60px;
        /* border-bottom: 1px solid gray; */
        box-shadow:0px 2px 2px #ddd;
        position: fixed;
        top:0px;
        left: 0;
        right: 0;
        margin:0 auto;
        z-index: 2;
    }
    .title{
        width: 1200px;
        height:40px;
        position: relative;
        left: 0;
        right: 0;
        margin: 0 auto;
        padding-top: 20px;
    }
    .title ul{
        list-style: none;
        /* margin-left: 300px; */
        /* line-height: 40px; */
        line-height: 80px;
    }
    .first{
        float: left;
        width: 100px;
        font-size: 20px;
        line-height: 100%;
        color: rgb(133,144,166);
    }
    .first:hover{
        color:rgb(68,68,68);
        font-weight: 600;
        cursor: pointer;
    }
    .second{
        float: right;
        font-size: 20px;
        line-height: 100%;
        width: 80px;
        margin-top: 5px;
    }
    .second:hover{
        color: rgb(118,131,155);
        cursor: pointer;
    }
    .title img{
            width: 30px;
            height: 30px;
            border-radius: 5px;
            margin-top: -10px;
        }
    .title svg{
        width: 25px;
        height: 25px;
        float: left;
    }
    .inputbg{
        margin-left: -25px;
        margin-top:-3px;
        z-index: 2;
        position:relative;
    }
    /* 中心板块 */
    #nav{
            width: 1200px;
            position: relative;
            left: 0;
            right:0;
            margin: 0 auto;
            margin-top: 70px;
            margin-bottom: 20px;
        }
        #left{
            width:740px;
            height: 100%;
            box-shadow:0px 0px 3px #ddd;
            padding-bottom: 30px;
            padding-right: 30px;
            float: left;
            margin-bottom: 20px;
            background-color: white;
        }
        #right{
            margin-left: 10px;        
            width:330px;
            box-shadow:0px 0px 3px #ddd;
            float: left;
            padding-right: 30px;
            padding-left: 20px;
            padding-bottom: 20px;
            /* background-color: white; */
            /* background-color: rgb(255, 243, 226); */
        }


    #content1{
        /* border: 1px solid blue; */
        height: 100%;
        width: 740px;
        float: left;
        padding-left: 20px;
        background-color: white;
        margin-top:50px;
        /* border-bottom: 1px solid #ccc; */
    }
    #content2{
        /* border: 1px solid blue; */
        height: 100%;
        width: 740px;
        float: left;
        padding-left: 20px;
        margin-top:50px;
        background-color: white;
        /* border-bottom: 1px solid #ccc; */
        display: none;
    }
    #content3{
        /* border: 1px solid blue; */
        height: 100%;
        width: 740px;
        float: left;
        padding-left: 20px;
        margin-top:50px;
        background-color: white;
        /* border-bottom: 1px solid #ccc; */
        display: none;
    }

    .heads{
        position: relative;
        left: -40px;
    }
    .liHeads{
        list-style: none;
        width: 100px;
        font-size: 20px;
        float: left;
        font-family: '微软雅黑';
    }
    .read{
        padding-top: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #ccc;
    }
    .read h3{
        margin-bottom: 10px;
    }
    .head{
        width: 700px;
        height: 50px;
        margin-left: -60px;
        margin-top: -40px;
        border-bottom: 1px solid #ccc;
        position: relative;
        line-height: 50px;
        margin-left: 0px;
        /* padding-left: -30px; */
    }
    .add{
        background-color: rgb(229, 242, 255);
        float: left;
        line-height: 40px;
        text-align: center;
        color: rgb(0, 132, 255);
        
    }
    .images{
        width: 18px;
        height: 18px;
        overflow: hidden;
    }
    .inner{
        line-height: 30px;
        float: left;
        width: 100px;
        height: 30px;
        /* padding-top: 10px; */
        padding: 5px;
        font-size: 15px;
        
    }
    .divs{
        width: 0px;
        height: 0px;
        border: 5px solid transparent;
        border-bottom: 10px solid rgb(0, 132, 255);
        float: left;
        position: relative;
        top: 4px;
        left: 9px;
    }
    .divss{
        width: 0px;
        height: 0px;
        border: 5px solid transparent;
        border-top: 9px solid rgb(0, 132, 255);
        float: left;
        position: relative;
        top: 10px; 
        left: 15px;
    }
    .ziti{
        position: relative;
        top: -2px;
        padding-left: 5px;
    }
    .innerContent{
        width: 600px;
        height:80px;
    }
    .innerHtml{
        width: 390px;
        float: left;
        height: 80px;
        overflow: hidden;
        font-size: 15px;
        margin-left: 10px;
        font-family: 宋体;
        line-height: 2em;
    }
    .imagess{
        width: 200px;
        height: 80px;
        float: left;
    }
    .rightTitle{
        width: 340px;
        height: 100px;
        /* background-color: white; */
        /* box-shadow: 1px 1px 1px #ccc; */
    }
    .rightImage{
        width: 35px;
        height: 35px;
        border: 1px solid transparent;
        border-radius: 50%;
        background-color: rgb(255, 243, 226);
    }
    .rightLi{
        width: 50px;
        float: left;
        padding-left: 30px;
        font-size: 13px;
        padding-top: 20px;
        /* background-color: white; */
    }
    .rightUse{
        width: 360px;
        height: 60px;
        /* background-color: white; */
    }
    .rightUseLi{
        width: 168px;
        height: 60px;
        line-height: 60px;
        font-size: 20px;
        margin-top: 5px;
        border: 1px solid #ccc;
        /* box-shadow: 1px 1px 1px #ccc; */
        float: left;
        text-align: center;
        /* background-color: white; */
    }
    .creation{
        width: 320px;
        height: 60px;
        margin-top: 15px;
        border: 1px solid #ccc;
        /* box-shadow: 1px 1px #ccc; */
        line-height: 70px;
        padding-left: 20px;
        font-size: 20px;
        font-family: 黑体;
    }
    .creations{
        font-size: 18px;
        padding-left: 80px;
        color: blue;
    }
    .extension{
        width: 340px;
        height: 150px;
        padding-left: 10px;
    }
    .extensionLi{
        width: 40px;
        float: left;
        padding-left: 35px;
        padding-right: 35px;
        font-size: 13px;
        padding-top: 20px;
        

    }
    .collect{
        width: 300px;
        height: 280px;
        margin-top: 20px;
        
    }
    .collectLi{
        padding: 5px;
        width: 300px;
        height: 30px;
        color: rgb(133, 144, 166);

    }
    .collectSpan{
        padding-left: 20px;
    }
    #transform{
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: 0.5;
            position: fixed;
            left: 0;
            top: 0;
            display: none;
            z-index: 10;
        }
        #message{
            width: 500px;
            height: 500px;
            margin: 200px auto;
            border:1px solid #ccc;
            display: none;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -250px;
            /* transform: translate(-50%,-50%); */
            background-color: #fff;
            z-index: 10;
        }
        .advice{
            width: 340px;
            height: 340px;       
            margin-top: 30px;
        }
        #Recommand1{
            height: 100%;
        }
        .answers{
            width: 600px;
            height: 600px;
            border: 1px solid #ccc;
            display: none;
            margin-left: 60px;
        }
        .answerTitle{
            width: 600px;
            height: 30px;
        }
        #answerUl{
            width: 600px;
            height: 500px;
        }
        .anserTitle{
            width: 600px;
            height: 40px;
            border-bottom: 1px solid #ccc;
            line-height: 40px;
            /* padding-left: 20px; */

        }
        .anserTitle>span{
            padding-left: 20px;
            font-size: 15px;
            font-family: 黑体;
        }
        #answerUl>ul>li{
            width: 600px;
            height: 100px;
        }
        #answerUl>ul{
            padding-inline-start: 0px;margin-block-start: 0em;
            margin-block-end: 0em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            list-style: none;
        }
        #answerUl>ul>li>img{
            width: 40px;
            height: 40px;
            margin-left: 20px;
        }
        .name{
            margin-left: 20px;
            position: relative;
            top: -10px;
        }
        .datas{
            position: relative;
            top: -10px;
            margin-left: 400px;
        }
        #answerUl>ul>li>p{
            width: 480px;
            height: 40px;
            overflow: hidden;
            margin-left: 80px;
        }

</style>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    // var userInfo = localStorage.getItem('userName')
    // if(userInfo == null){
    //     alert('本页面需要登录才能访问！')
    //     location.herf="login.html"
    //
    // }
    var loopPics = ['01.jpeg', '02.png', '03.jpg']
        var index = 0
        setInterval(function () {
            var myImg = document.getElementById('loopPic')
            myImg.src = 'images/'+loopPics[index++]
            if (index > 2) {
                index = 0
            }
        }, 3000);
    var Random = Mock.Random
    window.onload = function(){
        // document.body.style.overflow = 'hidden'
        document.querySelectorAll('.rightLi')[3].onclick = function(e){
        document.querySelector('#transform').style.display = 'block'
        document.querySelector('#message').style.display = 'block'
        if(e.stopPropagation && e){
            e.stopPropagation()
        }
        }
        document.onclick = function(e){
            if(e.target.id =="transform"){
        document.querySelector('#transform').style.display = 'none'
        document.querySelector('#message').style.display = 'none'
            }
    }
    // mock
    Mock.mock("http://localhost:5500/api/getAllUsers",function(){
        var result = []
        for(var i=0;i<15;i++){
            var journalism = Mock.mock({
                'title':Random.csentence(10,15),
                'content':Random.cparagraph(60),
                 "likeNUm|1-100":100,
                 "comment|1-400":100,

            })
            result.push(journalism)
        }
        return result
    })


    // 2mock
    Mock.mock("http://localhost:5500/api/getAllUserss",function(){
        var commuicate = []
        for(var i=0;i<6;i++){
            var journalism = Mock.mock({
                'name':Random.csentence(3,5),
                'contents':Random.cparagraph(30),
                 'date':Random.date('y-M-d'),
                 "imgNum|1-5":1,

            })
            commuicate.push(journalism)
        }
        return commuicate
    })


    // 2次请求
    $.ajax({
        url:'http://localhost:5500/api/getAllUserss',
        type:'get',
        dataType:'json',
        success:function(e){
            console.log(e)
            var strUl=''
            for(var a=0;a<e.length;e++){
                strUl+=`
                    <li>
                            <img src="images/01.jpg" alt="">
                            <span class="name">${e[a].name}</span>
                            <span class="datas">${e[a].data}</span>
                            <p>${e[a].contents}</p>
                            
                    </li>`
            }
            $('#answerUl').html(strUl)
        }
    })




    // 发出请求，获取数据
    $.ajax({
        url:'http://localhost:5500/api/getAllUsers',
        type:'get',
        dataType:'json',
        success:function(e){
            // console.log(e)
            var strHTML = ''
            for(var i=0;i<e.length;i++){
                strHTML += `<div class="read">
                    <h3 onclick="changeUrl(this)">${e[i].title}</h3>
                    <div class="innerContent"> <div class="imagess"><img src="images/bigpic1.JPG" style="width: 200px; height: 80px;"></div>
                        <div class="innerHtml">${e[i].content}</div>
                    </div>
                    <div style="margin-top: 10px;">
                        <div class="add" style="width: 90px; height: 30px; line-height: 30px;"><div class="divs"></div>赞同${e[i].likeNUm}</div>
                        <div class="add" style="width: 40px; height: 30px; margin-left: 10px;"><div class="divss"></div></div></div>
                        <div style="float: left;">
                            <ul style="float:left;margin:0px;padding-left: 60px;">
                                <li class="inner" onclick=showAnswers(this)><img class="images" src="images/评论.png"><span class="ziti">${e[i].comment}条评论</span></li>
                                <li class="inner"><img class="images" src="images/分享.png"><span class="ziti">分享</span></li>
                                <li class="inner"><img class="images" src="images/喜欢.png"><span class="ziti">喜欢</span></li>
                                <li class="inner"><img class="images" src="images/举报.png"><span class="ziti">举报</span></li>
                            </ul>
                        </div>
                    <p style="clear: both;"></p> 
                </div>
                <div class="answers">
            <div class="anserTitle">
                <span>319条评论</span>
            </div>
            <div id="answerUl">
                <ul>
                    <li>
                            <img src="images/01.jpg" alt="">
                            <span class="name">小仙女</span>
                            <span class="datas">8-21</span>
                            <p>的哈市俺啥都暗示按时打开后打开后打的好的啊哈打开的哈市俺啥都暗示按时打开后打开后打的好的啊哈打开的哈市俺啥都暗示按时打开后打开后打的好的啊哈打开的哈市俺啥都暗示按时打开后打开后打的好的啊哈打开的哈市俺啥都暗示按时打开后打开后打的好的啊哈打开</p>
                            
                    </li>
                </ul>
            </div>
        </div>` 
            }
            $('#Recommend').html(strHTML)

        },
        error:function(){

        }
    })
    // $('.first:nth-child(2)').on({
    //         click:function(){
    //             location.href = 'index.html'
    //         }
    //     })
        // $('.first:nth-child(3)').on({
        //     click:function(){
        //         location.href = 'index.html'
        //     }
        // })
    document.getElementsByClassName('first')[1].onclick = function(){
            location.href="index.html"
        }    
    document.getElementsByClassName('second')[0].onclick = function(){
            location.href="personal.html"
        }
    document.getElementsByClassName('read')[1].onclick=function(){
            location.href='topic.html'
            console.log('1')
    }
    // $('.read:firs-child').on('click',function(){
    //     location.href='topoc.html'
    // })
    }
    function changeRecommand(){
        var content2 = document.getElementById('content2')
        content2.style.display  = 'none'
        var content1 = document.getElementById('content1')
        content1.style.display = 'inline-block' 
        document.getElementById('content3').style.display = 'none'
    }
    function changeFocus(){
        var content2 = document.getElementById('content2')
        content2.style.display  = 'inline-block'
        var content1 = document.getElementById('content1')
        content1.style.display = 'none'
        document.getElementById('content3').style.display = 'none'

    }
    function changeHot(){
        document.getElementById('content3').style.display = 'inline-block'
        var content2 = document.getElementById('content2')
        content2.style.display  = 'none'
        var content1 = document.getElementById('content1')
        content1.style.display = 'none'
    }
    function writeArticle(){
        location.href="write.html"
    }
    function afterAnswer(){
        location.href = 'afterAnswer.html'
    }
    function goColum(){
        location.href="special_colum.html"
    }
    var titleProfile=[]
    function changeUrl(that){
        console.log(that.innerHTML)
        console.log(that.nextElementSibling.firstElementChild.nextElementSibling.innerHTML)
            var titleName = that.innerHTML
            var titleContent = that.nextElementSibling.firstElementChild.nextElementSibling.innerHTML
            titleProfile.push({"titleName":titleName,"titleContent":titleContent})
            sessionStorage['titleProfile'] = JSON.stringify(titleProfile)
            location.href = "topic2.html"
    }
    function showAnswers(that){
        if(that.parentNode.parentNode.parentNode.nextElementSibling.style.display == 'none'){
            console.log(that.parentNode.parentNode.parentNode.nextElementSibling.style.display = 'block')
        }else{
            console.log(that.parentNode.parentNode.parentNode.nextElementSibling.style.display = 'none')
        }
       
    }

            
</script>
<body>
    <div id="total1">
        <!-- 通栏 -->
        <div id="total" style="background-color: #fff;">
            <div class="title">
                <ul>
                    <li class="first"><img style="width: 100px; height: 50px;margin-left: -40px;margin-top: -14px;" src="images/知遇.png" alt=""></li>
                    <li class="first">首页</li>
                    <li class="first">发现</li>
                    <li class="first">等你来答</li>
                <form action="">
                    <li class="first" style="width: 200px; padding-left: 40px; position: relative; top: -8px;">
                        <input type="text" style="width: 200px;height: 30px;" maxlength="11" placeholder="多地高校明确秋季开学时间"></li>
                        <svg class="inputbg" t="1597731143968" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8353" width="200" height="200"><path d="M798.386532 434.840666c0 90.322122-32.875059 173.048241-87.325366 236.740866 0 0 195.358181 195.621353 232.072842 231.577263 30.171373 29.522384-4.434167 75.370595-43.419638 33.901111-23.467419-24.980951-228.233239-225.844701-228.233239-225.844701-63.803709 54.933123-146.802359 88.132246-237.587665 88.132246-201.30588 0-364.492043-163.235758-364.492043-364.506784 0-201.271026 163.186162-364.477109 364.492043-364.477109C635.200369 70.363558 798.386532 233.56964 798.386532 434.840666zM433.893466 128.136356c-169.349788 0-306.69027 137.333832-306.69027 306.676681 0 169.398108 137.340482 306.732963 306.69027 306.732963 169.404026 0 306.744508-137.334855 306.744508-306.732963C740.637974 265.470187 603.297491 128.136356 433.893466 128.136356z" p-id="8354" fill="#707070"></path></svg>
                    <li class="first" style="padding-left: 50px; position: relative; top: -8px;">
                        <input style="width: 60px; height: 35px; border-style :none;background-color: rgb(94,113,179); color: white; border-radius: 5px;" type="button" value="提问"></li>
                </form>
                    <li class="second" ><img src="images/logo.jpg" alt=""></li>
                    <li class="second" style="position: relative; top: -8px;">
                        <svg t="1597728984114" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6206" width="200" height="200"><path d="M512 0C229.180952 0 0 229.180952 0 512c0 141.409524 58.514286 270.628571 151.161905 363.27619C197.485714 921.6 0 1024 0 1024h512c282.819048 0 512-229.180952 512-512S794.819048 0 512 0z m-195.047619 365.714286h268.190476c19.504762 0 36.571429 17.066667 36.571429 36.571428S604.647619 438.857143 585.142857 438.857143H316.952381c-19.504762 0-36.571429-17.066667-36.571429-36.571429S297.447619 365.714286 316.952381 365.714286z m414.47619 292.571428H316.952381c-19.504762 0-36.571429-17.066667-36.571429-36.571428S297.447619 585.142857 316.952381 585.142857h414.47619c19.504762 0 36.571429 17.066667 36.571429 36.571429S750.933333 658.285714 731.428571 658.285714z" fill="#8a8a8a" p-id="6207"></path></svg>
                    </li>
                    <li class="second" style="position: relative; top: -8px;">
                        <svg t="1597729015370" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7331" width="200" height="200"><path d="M876.266158 704.70146H882.692115a70.614907 70.614907 0 0 1 70.614906 70.614906v2.895212a70.614907 70.614907 0 0 1-70.614906 70.614906H141.235596a70.614907 70.614907 0 0 1-70.614906-70.614906v-2.895212a70.614907 70.614907 0 0 1 70.614906-70.614906h6.425957L153.24013 353.074533C156.36484 158.071468 316.960791 0 511.963856 0s355.599016 158.071468 358.706071 353.074533l5.596231 351.626927zM370.981195 865.032605h299.619048a150.056676 150.056676 0 1 1-299.601395 0z" p-id="7332" fill="#8a8a8a"></path></svg>
                    </li>
                    
                </ul>
            </div>
        </div>
    <div id="nav">
        <div id="left">
            <div id="content1">
                <div class="head">
                    <ul class="heads">
                        <li class="liHeads" onclick="changeRecommand()">推荐</li>
                        <li class="liHeads" onclick="changeFocus()">关注</li>
                        <li class="liHeads" onclick="changeHot()">热榜</li>
                    </ul>
                    
                </div>
                <div id="Recommend">
                <div class="read">
                    <h3>高中同学被211大学---石河子大学录取，为何他选择了复读？</h3>
                    <div class="innerContent"> <div class="imagess"><img src="images/bigpic1.JPG" style="width: 200px; height: 80px;"></div>
                        <div class="innerHtml">阅读全文</div>
                    </div>
                    <div style="margin-top: 10px;">
                        <div class="add" style="width: 90px; height: 30px; line-height: 30px;"><div class="divs"></div>赞同12</div>
                        <div class="add" style="width: 40px; height: 30px; margin-left: 10px;"><div class="divss"></div></div></div>
                        <div style="float: left;">
                            <ul style="float:left;margin:0px;padding-left: 60px;">
                                <li class="inner"><img class="images" src="images/评论.png"><span class="ziti">176条评论</span></li>
                                <li class="inner"><img class="images" src="images/分享.png"><span class="ziti">分享</span></li>
                                <li class="inner"><img class="images" src="images/喜欢.png"><span class="ziti">喜欢</span></li>
                                <li class="inner"><img class="images" src="images/举报.png"><span class="ziti">举报</span></li>
                            </ul>
                        </div>
                    <p style="clear: both;"></p> 
                </div>
                   
                <div class="read">
                    <h3>最新判决：男子强迫女友与狗发生关系，猥亵强奸女友获刑7年！</h3>
                    <div class="innerContent"> <div class="imagess"><img src="images/bigpic1.JPG" style="width: 200px; height: 80px;"></div>
                        <div class="innerHtml">这是近期判决的一则刑事案例。北京丰台一男子刘某某强迫女友与自己养的法国斗牛犬发生关系，并多次对女友进行猥亵强奸，最终被判刑。7月6日，中国裁判文书网公布了本案的刑事裁定书，刘某某因犯强制猥亵罪和强奸罪获刑7年，提出上诉后，北京市二中院于2020年6月28日终审维持原判。</div>
                    </div>
                    <div style="padding-top: 10px;">
                        <div class="add" style="width: 90px; height: 30px; line-height: 30px;"><div class="divs"></div>赞同12</div>
                        <div class="add" style="width: 40px; height: 30px; margin-left: 10px;"><div class="divss"></div></div></div>
                        <div style="float: left;">
                            <ul style="float:left;margin:0px;padding-left: 60px;">
                                <li class="inner"><img class="images" src="images/评论.png"><span class="ziti">176条评论</span></li>
                                <li class="inner"><img class="images" src="images/分享.png"><span class="ziti">分享</span></li>
                                <li class="inner"><img class="images" src="images/喜欢.png"><span class="ziti">喜欢</span></li>
                                <li class="inner"><img class="images" src="images/举报.png"><span class="ziti">举报</span></li>
                            </ul></div>
                    <p style="clear: both;"></p> 
                </div>
                <div class="read">
                    <h3>高中同学被211大学---石河子大学录取，为何他选择了复读？</h3>
                    <div class="innerContent"> <div class="imagess"><img src="images/bigpic1.JPG" style="width: 200px; height: 80px;"></div>
                        <div class="innerHtml">阅读全文</div>
                    </div>
                    <div style="padding-top: 10px;">
                        <div class="add" style="width: 90px; height: 30px; line-height: 30px;"><div class="divs"></div>赞同12</div>
                        <div class="add" style="width: 40px; height: 30px; margin-left: 10px;"><div class="divss"></div></div></div>
                        <div style="float: left;">
                            <ul style="float:left;margin:0px;padding-left: 60px;">
                                <li class="inner"><img class="images" src="images/评论.png"><span class="ziti">176条评论</span></li>
                                <li class="inner"><img class="images" src="images/分享.png"><span class="ziti">分享</span></li>
                                <li class="inner"><img class="images" src="images/喜欢.png"><span class="ziti">喜欢</span></li>
                                <li class="inner"><img class="images" src="images/举报.png"><span class="ziti">举报</span></li>
                            </ul></div>
                        <p style="clear: both;"></p>     
                </div>
            </div>
            </div>   
            <div id="content2">
                <div class="head">
                    <ul class="heads">
                        <li class="liHeads" onclick="changeRecommand()">推荐</li>
                        <li class="liHeads" onclick="changeFocus()">关注</li>
                        <li class="liHeads" onclick="changeHot()">热榜</li>
                    </ul>
                </div>
                <!-- <div class="read">
                    <h3>高中同学被211大学---石河子大学录取，为何他选择了复读？</h3>
                    <div class="innerContent"> <div class="imagess"><img src="images/bigpic1.JPG" style="width: 200px; height: 80px;"></div>
                        <div class="innerHtml">阅读全文</div>
                    </div>
                    <div style="padding-top: 10px;">
                        <div class="add" style="width: 90px; height: 30px; line-height: 30px;"><div class="divs"></div>赞同12</div>
                        <div class="add" style="width: 40px; height: 30px; margin-left: 10px;"><div class="divss"></div></div></div>
                        <div style="float: left;">
                            <ul style="float:left;margin:0px;padding-left: 60px;">
                                <li class="inner"><img class="images" src="images/评论.png"><span class="ziti">176条评论</span></li>
                                <li class="inner"><img class="images" src="images/分享.png"><span class="ziti">分享</span></li>
                                <li class="inner"><img class="images" src="images/喜欢.png"><span class="ziti">喜欢</span></li>
                                <li class="inner"><img class="images" src="images/举报.png"><span class="ziti">举报</span></li>
                            </ul></div>
                   
                </div>
                <br/>      -->
                <div class="read">
                    <h3>最新判决：男子强迫女友与狗发生关系，猥亵强奸女友获刑7年！</h3>
                    <div class="innerContent"> <div class="imagess"><img src="images/bigpic1.JPG" style="width: 200px; height: 80px;"></div>
                        <div class="innerHtml">这是近期判决的一则刑事案例。北京丰台一男子刘某某强迫女友与自己养的法国斗牛犬发生关系，并多次对女友进行猥亵强奸，最终被判刑。7月6日，中国裁判文书网公布了本案的刑事裁定书，刘某某因犯强制猥亵罪和强奸罪获刑7年，提出上诉后，北京市二中院于2020年6月28日终审维持原判。</div>
                    </div>
                    <div style="padding-top: 10px;">
                        <div class="add" style="width: 90px; height: 30px; line-height: 30px;"><div class="divs"></div>赞同12</div>
                        <div class="add" style="width: 40px; height: 30px; margin-left: 10px;"><div class="divss"></div></div></div>
                        <div style="float: left;">
                            <ul style="float:left;margin:0px;padding-left: 60px;">
                                <li class="inner"><img class="images" src="images/评论.png"><span class="ziti">176条评论</span></li>
                                <li class="inner"><img class="images" src="images/分享.png"><span class="ziti">分享</span></li>
                                <li class="inner"><img class="images" src="images/喜欢.png"><span class="ziti">喜欢</span></li>
                                <li class="inner"><img class="images" src="images/举报.png"><span class="ziti">举报</span></li>
                            </ul>
                        </div>
                        <p style="clear: both;"></p> 
                </div>
                <div class="read">
                    <h3>高中同学被211大学---石河子大学录取，为何他选择了复读？</h3>
                    <div class="innerContent"> <div class="imagess"><img src="images/bigpic1.JPG" style="width: 200px; height: 80px;"></div>
                        <div class="innerHtml">阅读全文</div>
                    </div>
                    <div style="padding-top: 10px;">
                        <div class="add" style="width: 90px; height: 30px; line-height: 30px;"><div class="divs"></div>赞同12</div>
                        <div class="add" style="width: 40px; height: 30px; margin-left: 10px;"><div class="divss"></div></div></div>
                        <div style="float: left;">
                            <ul style="float:left;margin:0px;padding-left: 60px;">
                                <li class="inner"><img class="images" src="images/评论.png"><span class="ziti">176条评论</span></li>
                                <li class="inner"><img class="images" src="images/分享.png"><span class="ziti">分享</span></li>
                                <li class="inner"><img class="images" src="images/喜欢.png"><span class="ziti">喜欢</span></li>
                                <li class="inner"><img class="images" src="images/举报.png"><span class="ziti">举报</span></li>
                            </ul>
                        </div>
                        <p style="clear: both;"></p>     
                </div>
                
            </div>
            <div id="content3">
                <div class="head">
                    <ul class="heads">
                        <li class="liHeads" onclick="changeRecommand()">推荐</li>
                        <li class="liHeads" onclick="changeFocus()">关注</li>
                        <li class="liHeads" onclick="changeHot()">热榜</li>
                    </ul>
                </div>
                <div class="read">
                    <h3>高中同学被211大学---石河子大学录取，为何他选择了复读？</h3>
                    <div class="innerContent"> <div class="imagess"><img src="images/bigpic1.JPG" style="width: 200px; height: 80px;"></div>
                        <div class="innerHtml">阅读全文</div>
                    </div>
                    <div style="padding-top: 10px;">
                        <div class="add" style="width: 90px; height: 30px; line-height: 30px;"><div class="divs"></div>赞同12</div>
                        <div class="add" style="width: 40px; height: 30px; margin-left: 10px;"><div class="divss"></div></div></div>
                        <div style="float: left;">
                            <ul style="float:left;margin:0px;padding-left: 60px;">
                                <li class="inner"><img class="images" src="images/评论.png"><span class="ziti">176条评论</span></li>
                                <li class="inner"><img class="images" src="images/分享.png"><span class="ziti">分享</span></li>
                                <li class="inner"><img class="images" src="images/喜欢.png"><span class="ziti">喜欢</span></li>
                                <li class="inner"><img class="images" src="images/举报.png"><span class="ziti">举报</span></li>
                            </ul>
                        </div>
                            <p style="clear: both;"></p>   
                </div>
                <br/>     
                <!-- <div class="read">
                    <h3>最新判决：男子强迫女友与狗发生关系，猥亵强奸女友获刑7年！</h3>
                    <div class="innerContent"> <div class="imagess"><img src="images/bigpic1.JPG" style="width: 200px; height: 80px;"></div>
                        <div class="innerHtml">这是近期判决的一则刑事案例。北京丰台一男子刘某某强迫女友与自己养的法国斗牛犬发生关系，并多次对女友进行猥亵强奸，最终被判刑。7月6日，中国裁判文书网公布了本案的刑事裁定书，刘某某因犯强制猥亵罪和强奸罪获刑7年，提出上诉后，北京市二中院于2020年6月28日终审维持原判。</div>
                    </div>
                    <div style="padding-top: 10px;">
                        <div class="add" style="width: 90px; height: 30px; line-height: 30px;"><div class="divs"></div>赞同12</div>
                        <div class="add" style="width: 40px; height: 30px; margin-left: 10px;"><div class="divss"></div></div></div>
                        <div style="float: left;">
                            <ul style="float:left;margin:0px;padding-left: 60px;">
                                <li class="inner"><img class="images" src="images/评论.png"><span class="ziti">176条评论</span></li>
                                <li class="inner"><img class="images" src="images/分享.png"><span class="ziti">分享</span></li>
                                <li class="inner"><img class="images" src="images/喜欢.png"><span class="ziti">喜欢</span></li>
                                <li class="inner"><img class="images" src="images/举报.png"><span class="ziti">举报</span></li>
                            </ul></div> 
                </div> -->
                <div class="read">
                    <h3>高中同学被211大学---石河子大学录取，为何他选择了复读？</h3>
                    <div class="innerContent"> <div class="imagess"><img src="images/bigpic1.JPG" style="width: 200px; height: 80px;"></div>
                        <div class="innerHtml">阅读全文</div>
                    </div>
                    <div style="padding-top: 10px;">
                        <div class="add" style="width: 90px; height: 30px; line-height: 30px;"><div class="divs"></div>赞同12</div>
                        <div class="add" style="width: 40px; height: 30px; margin-left: 10px;"><div class="divss"></div></div></div>
                        <div style="float: left;">
                            <ul style="float:left;margin:0px;padding-left: 60px;">
                                <li class="inner"><img class="images" src="images/评论.png"><span class="ziti">176条评论</span></li>
                                <li class="inner"><img class="images" src="images/分享.png"><span class="ziti">分享</span></li>
                                <li class="inner"><img class="images" src="images/喜欢.png"><span class="ziti">喜欢</span></li>
                                <li class="inner"><img class="images" src="images/举报.png"><span class="ziti">举报</span></li>
                            </ul>
                        </div>
                        <p style="clear: both;"></p>     
                </div>    
            </div>
        </div>
        
        <div id="right" style="background-color: white;">
            <div class="rightTitle">
                <ul style="margin: 0px;">
                    <li class="rightLi"><img class="rightImage"  src="images/问题.png"><p>答问题</p></li>
                    <li class="rightLi" onclick="writeArticle()"><img class="rightImage" src="images/文章.png"><p>写文章</p></li>
                    <li class="rightLi"><img class="rightImage" src="images/视频.png"><p>发视频</p></li>
                    <li class="rightLi"><img class="rightImage" src="images/想法.png"><p>写想法</p></li>
                </ul>
            </div>
            <div class="rightUse">
                <ul style="margin: 0px;">
                    <li class="rightUseLi" onclick="afterAnswer()">稍后答</li>
                    <li class="rightUseLi">草稿箱</li>
                </ul>
            </div>
            
            <div class="creation">
               <svg t="1597729926392" class="icon" style=" position:relative;top: 6px;left:2px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10546" width="30" height="30"><path d="M896 864a32 32 0 0 1 0 64H128a32 32 0 0 1 0-64z m-60.16-733.621l15.093 15.093c45.867 45.835 45.867 120.16 0 166.005L418.795 743.34a160.192 160.192 0 0 1-78.123 42.986l-152.245 34.198c-23.84 5.365-44.662-16.854-37.75-40.288l43.339-146.88a160.043 160.043 0 0 1 40.373-67.926l435.328-435.05c45.867-45.835 120.246-45.835 166.112 0zM636.32 254.304L279.68 610.709a96.021 96.021 0 0 0-24.213 40.747l-27.947 94.656 99.093-22.261a96.117 96.117 0 0 0 46.87-25.782l353.45-353.226-90.602-90.539z m78.699-78.656l-33.398 33.387 90.603 90.538 33.387-33.376a53.333 53.333 0 0 0 0-75.456l-15.094-15.093a53.408 53.408 0 0 0-75.498 0z" p-id="10547"></path></svg><span style="margin-top: -4px;">创作中心</span>
               <span class="creations">去开通>></span>
            </div>
            
            <div class="extension">
                <ul style="margin: 0px;">
                    <li class="extensionLi"><svg t="1597730611916" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13567" width="30" height="30"><path d="M754.4 490.2l-194.7-40.4 83.2-283.1-373.3 367.1 194.7 40.4-83.2 283.1 373.3-367.1z" fill="#FFD81A" p-id="13568"></path></svg><p>Live</p></li>
                    <li class="extensionLi"><svg t="1597730662989" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15427" width="30" height="30"><path d="M32 347.2h204.8v614.4H32zM32 80h204.8v235.2H32z" fill="#9DE8F7" p-id="15428"></path><path d="M0 48v944h268.8V48H0z m32 913.6V347.2h204.8v614.4H32z m204.8-646.4H32V80h204.8v235.2z" fill="#1A1718" p-id="15429"></path><path d="M368 347.2h204.8v614.4H368zM368 80h204.8v235.2H368z" fill="#FAD97F" p-id="15430"></path><path d="M336 48v944h268.8V48H336z m32 913.6V347.2h204.8v614.4H368z m204.8-646.4H368V80h204.8v235.2z" fill="#1A1718" p-id="15431"></path><path d="M931.2 297.6L910.4 64l-203.2 19.2 20.8 232zM988.8 940.8l-54.4-611.2-203.2 17.6L785.6 960z" fill="#F2385A" p-id="15432"></path><path d="M939.2 30.4L672 52.8l84.8 940.8L1024 971.2 939.2 30.4zM910.4 64l20.8 233.6-203.2 17.6-20.8-232L910.4 64z m24 265.6l54.4 611.2-203.2 19.2-54.4-612.8 203.2-17.6z" fill="#1A1718" p-id="15433"></path></svg><p>书店</p></li>
                    <li class="extensionLi"><svg t="1597730753195" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20265" width="30" height="30"><path d="M341.33312 29.141528v965.71673C142.463911 924.586302 0 734.933087 0 511.999893 0 289.066699 142.463911 99.413485 341.33312 29.141528z" fill="#000000" p-id="20266"></path><path d="M682.66624 29.141528v965.71673A511.167681 511.167681 0 0 1 511.99968 1023.999573c-59.839963 0-117.290593-10.261327-170.66656-29.141315V29.141528A511.167681 511.167681 0 0 1 511.99968 0.000213c59.839963 0 117.290593 10.261327 170.66656 29.141315z" fill="#E94B35" p-id="20267"></path><path d="M682.66624 994.858258V29.141528C881.535449 99.413485 1023.99936 289.066699 1023.99936 511.999893c0 222.933194-142.463911 412.586409-341.33312 482.858365z" fill="#1FCE6D" p-id="20268"></path><path d="M340.266454 336.789336A244.650514 244.650514 0 0 0 266.6665 511.999893c0 135.487915 109.845265 245.33318 245.33318 245.33318S757.33286 647.487809 757.33286 511.999893c0-66.773292-26.85865-129.386586-73.599954-175.210557a31.99998 31.99998 0 0 0-44.799972 45.717305A180.650554 180.650554 0 0 1 693.3329 511.999893a181.33322 181.33322 0 1 1-362.66644 0c0-49.407969 19.818654-95.573274 54.399966-129.493252a31.99998 31.99998 0 0 0-44.799972-45.717305z" fill="#FFFFFF" p-id="20269"></path><path d="M383.99976 501.333233a159.9999 127.99992 90 1 0 255.99984 0 159.9999 127.99992 90 1 0-255.99984 0Z" fill="#FFFFFF" p-id="20270"></path></svg><p>圆桌</p></li>
                </ul>
                <ul style="margin: 0px;">
                    <li class="extensionLi" onclick="goColum()"><svg t="1597730797271" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20488" width="30" height="30"><path d="M896 170.7H128c-23.6 0-42.7 19.1-42.7 42.7v597.3c0 23.6 19.1 42.7 42.7 42.7h768c23.6 0 42.7-19.1 42.7-42.7V213.3c0-23.5-19.1-42.6-42.7-42.6zM633.5 534.3l-89 89c-8.7 8.7-20.2 13.5-32.5 13.5s-23.8-4.8-32.5-13.5l-89-89c-16.4-16.3-25.4-38-25.5-61.2 0-23.2 9-45 25.4-61.4s38.2-25.4 61.3-25.4c22.7 0 44.1 8.7 60.3 24.5 16.3-15.8 37.7-24.5 60.4-24.5 23.2 0 44.9 9 61.3 25.5 16.4 16.4 25.4 38.2 25.4 61.4-0.1 23-9.2 44.8-25.6 61.1z" fill="#009F72" p-id="20489"></path><path d="M810.7 768H213.3c-23.6 0-42.7-19.1-42.7-42.7s19.1-42.7 42.7-42.7h597.3c23.6 0 42.7 19.1 42.7 42.7S834.2 768 810.7 768zM421.5 442.8c16.7-16.7 43.7-16.7 60.3 0l28.8 28.8c0.8 0.8 2.1 0.8 2.8 0l28.8-28.8c16.7-16.7 43.7-16.7 60.3 0 16.7 16.7 16.7 43.7 0 60.3l-89.1 89.1c-0.8 0.8-2 0.8-2.8 0l-89.1-89.1c-16.7-16.6-16.7-43.6 0-60.3zM810.7 341.3H213.3c-23.6 0-42.7-19.1-42.7-42.7s19.1-42.7 42.7-42.7h597.3c23.6 0 42.7 19.1 42.7 42.7s-19.1 42.7-42.6 42.7z" fill="#F9DB88" p-id="20490"></path></svg><p>专栏</p></li>
                    <li class="extensionLi"><svg t="1597730839644" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20827" width="30" height="30"><path d="M820.369 190.613c-81.549-81.504-189.983-126.39-305.331-126.39-115.331 0-223.772 44.96-305.346 126.6-81.553 81.618-126.466 190.095-126.466 305.446 0 59.39 11.841 116.948 35.194 171.074 22.56 52.289 54.774 98.985 95.746 138.791 0.508 0.494 0.843 0.82 0.851 2.833 0.065 17.9-26.524 52.482-44.491 70.197a28.765 28.765 0 0 0 20.148 49.296h285.474c15.886 0 28.766-12.878 28.766-28.766s-12.879-28.766-28.766-28.766H250.812c11.948-18.946 21.788-40.976 21.735-62.092-0.043-17.179-6.368-32.382-18.292-43.967-73.191-71.108-113.498-166.5-113.498-268.602 0-206.508 167.901-374.514 374.281-374.514 206.378 0 374.28 167.83 374.28 374.121 0 51.987-9.659 101.168-28.707 146.176-6.193 14.63 0.649 31.51 15.279 37.702 14.633 6.194 31.51-0.65 37.701-15.28 22.069-52.141 33.257-108.866 33.257-168.599 0.002-115.332-44.917-223.743-126.479-305.26z" fill="#E75934" p-id="20828"></path><path d="M364.579 478.864m-66.887 0a66.887 66.887 0 1 0 133.774 0 66.887 66.887 0 1 0-133.774 0Z" fill="#E75934" p-id="20829"></path><path d="M675.248 478.864m-66.887 0a66.887 66.887 0 1 0 133.774 0 66.887 66.887 0 1 0-133.774 0Z" fill="#E75934" p-id="20830"></path><path d="M806.952 817.713c15.887 0 28.766-12.879 28.766-28.766 0-15.887-12.879-28.766-28.766-28.766h-74.625l59.411-69.094c10.357-12.046 8.989-30.208-3.058-40.565-12.041-10.357-30.205-8.991-40.565 3.056l-58.753 68.329-56.632-67.985c-10.169-12.206-28.306-13.86-40.513-3.69-12.207 10.168-13.859 28.306-3.691 40.513l57.842 69.437h-73.854c-15.887 0-28.766 12.879-28.766 28.766 0 15.887 12.879 28.766 28.766 28.766h87.735v25.889h-87.735c-15.887 0-28.766 12.879-28.766 28.766 0 15.887 12.879 28.766 28.766 28.766h87.735v28.766c0 15.887 12.878 28.766 28.766 28.766s28.766-12.878 28.766-28.766v-28.766h89.173c15.887 0 28.766-12.879 28.766-28.766 0-15.887-12.879-28.766-28.766-28.766h-89.173v-25.889h89.171z" fill="#E75934" p-id="20831"></path></svg><p>付费咨询</p></li>
                    <li class="extensionLi"><svg t="1597730940354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23355" width="30" height="30"><path d="M90.352941 837.270588v-722.823529l210.82353 48.188235V69.270588L0 0v903.529412l301.176471 93.364706v-96.376471z" fill="#A3CCFA" p-id="23356"></path><path d="M632.470588 111.435294V18.070588l-283.105882 63.247059-48.188235-12.047059v927.62353l54.211764 15.058823 36.141177-6.023529 240.941176-54.211765v-90.352941l-240.941176 51.2V162.635294z" fill="#5490D6" p-id="23357"></path><path d="M674.635294 9.035294L632.470588 18.070588v933.647059l42.164706-9.035294L1024 1024V90.352941L674.635294 9.035294zM933.647059 909.552941l-210.82353-48.188235V114.447059l210.82353 48.188235v746.917647z" fill="#A3CCFA" p-id="23358"></path></svg><p>百科</p></li>
                </ul>
            </div>
                <div class="advice">
                    <img style="width: 340px; height: 340px;" src="https://pic1.zhimg.com/v2-1e950f2d301ca6e27ca46ee86d477bc4_540x450.jpeg" id="loopPic" alt="">
                </div>
            <div class="collect">
                <ul style="margin:0px">
                    <li class="collectLi"><svg t="1597731726736" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24104" width="20" height="20"><path d="M979.2 371.2l-243.2 0c-51.2 0-102.4-32-115.2-83.2L544 57.6c-12.8-32-51.2-32-64 0L403.2 288c-19.2 51.2-64 83.2-115.2 83.2L44.8 371.2C12.8 371.2 0 416 25.6 435.2L224 576c44.8 32 64 89.6 44.8 134.4L192 947.2c-12.8 32 25.6 57.6 51.2 38.4l198.4-140.8c44.8-32 102.4-32 147.2 0l198.4 140.8c25.6 19.2 64-6.4 51.2-38.4l-76.8-230.4c-19.2-51.2 0-108.8 44.8-134.4l198.4-140.8C1024 416 1011.2 371.2 979.2 371.2zM704 460.8c-179.2 0-204.8-262.4-204.8-262.4C499.2 192 499.2 185.6 512 179.2c6.4 0 12.8 6.4 19.2 12.8 0 0 19.2 236.8 172.8 236.8 6.4 0 12.8 6.4 12.8 12.8C716.8 454.4 710.4 460.8 704 460.8z" p-id="24105"></path></svg><span class="collectSpan">我的收藏</span></li>
                    <li class="collectLi"><svg t="1597731771029" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24859" width="20" height="20"><path d="M511.35488 131.9936s238.19264-198.7584 450.56 40.96c0 0 140.17536 152.33024-10.24 378.88l-409.6 409.6s-22.20032 33.792-61.44 0l-430.08-430.08s-107.04896-188.5184 0-348.16c0 0 182.85568-267.70432 460.8-51.2z" p-id="24860"></path><path d="M132.47488 387.9936a18.72896 18.72896 0 0 0 20.48-20.48s-6.33856-164.63872 163.84-163.84c0 0 20.48-4.32128 20.48-20.48s-20.48-20.48-20.48-20.48-204.46208-8.81664-204.8 204.8c0 0 2.95936 20.48 20.48 20.48z" fill="#EBBA50" p-id="24861"></path></svg><span class="collectSpan">我关注的问题</span></li>
                    <li class="collectLi"><svg t="1597731804278" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25693" width="20" height="20"><path d="M724.89984 602.65472c12.04224 9.56928 31.30368 4.7872 40.9344-9.5744 4.8128-7.18336 4.8128-14.3616 4.8128-21.53984-2.41152-7.17824-7.22432-14.3616-12.04224-19.14368-16.85504-9.5744-33.71008-21.53984-52.97152-28.71808 24.07936-23.936 43.3408-50.25792 55.37792-81.37728 14.4384-33.50016 21.67296-69.4016 21.67296-107.69408 0-148.3776-120.3968-268.04736-269.68576-268.04736S245.71904 188.61568 245.71904 336.99328c0 71.79776 28.89728 138.81344 79.4624 189.07648-156.50816 71.79264-257.6384 227.35872-257.6384 399.67744 0 16.75264 12.03712 28.71808 28.89216 28.71808s28.89216-11.96544 28.89216-28.71808c0-160.34816 101.12512-303.94368 250.4192-358.9888 84.28032 50.24768 192.63488 47.86688 274.49856 0 26.496 9.56416 52.98688 21.53472 74.65472 35.89632z m-211.8912-57.44128c-115.57888 0-209.48992-93.34272-209.48992-208.22016 0-114.87232 93.90592-208.20992 209.48992-208.20992 115.584 0 209.48992 93.3376 209.48992 208.20992 0 28.71808-4.8128 57.4464-16.85504 83.7632-9.63072 23.936-26.49088 45.47584-45.75744 64.61952-38.51776 38.2976-91.49952 59.83744-146.87744 59.83744z m411.71968 221.95712h-95.1296v-95.13472a31.70816 31.70816 0 1 0-63.41632 0v95.13472h-95.13472a31.70816 31.70816 0 0 0 0 63.42144h95.13472v95.1296a31.71328 31.71328 0 1 0 63.41632 0v-95.1296h95.1296a31.70816 31.70816 0 1 0 0-63.42144z" fill="#333333" p-id="25694"></path></svg><span class="collectSpan">我的邀请</span></li>
                    <li class="collectLi"><svg t="1597731844553" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27921" width="20" height="20"><path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0zM361.6 220.8c38.4-32 121.6 35.2 150.4 32 28.8 3.2 112-64 150.4-32 38.4 32-44.8 102.4-44.8 102.4h-208c-3.2 0-86.4-70.4-48-102.4zM624 361.6c0 9.6-9.6 19.2-19.2 19.2H416c-9.6 0-19.2-9.6-19.2-19.2s9.6-19.2 19.2-19.2h188.8c9.6 0 19.2 9.6 19.2 19.2z m-112 448c-144 0-262.4 12.8-262.4-108.8 0-89.6 64-233.6 156.8-300.8h208c92.8 67.2 156.8 211.2 156.8 300.8C774.4 822.4 656 809.6 512 809.6z m0 0" p-id="27922"></path><path d="M614.4 483.2c6.4-6.4 6.4-12.8 0-16-3.2-3.2-12.8-3.2-16 0L512 553.6l-86.4-86.4c-6.4-6.4-12.8-6.4-16 0-3.2 3.2-3.2 12.8 0 16l92.8 92.8v6.4H416c-6.4 0-12.8 6.4-12.8 12.8S409.6 608 416 608h83.2v48H416c-6.4 0-12.8 6.4-12.8 12.8s6.4 12.8 12.8 12.8h83.2v60.8c0 6.4 6.4 12.8 12.8 12.8s12.8-6.4 12.8-12.8v-60.8H608c6.4 0 12.8-6.4 12.8-12.8S614.4 656 608 656h-83.2v-48H608c6.4 0 12.8-6.4 12.8-12.8s-6.4-12.8-12.8-12.8h-83.2V576l89.6-92.8z m0 0" p-id="27923"></path></svg><span class="collectSpan">我的余额</span></li>
                    <li class="collectLi"><svg t="1597731875872" class="icon" viewBox="0 0 1467 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28703" width="20" height="20"><path d="M281.681038 833.589084l-83.849553 105.251831c-32.0442 40.19906 7.122813 97.232321 56.897911 82.902101l373.634693-107.806569c59.401893-17.13874 46.442095-103.509195-15.463779-102.950874l-289.768221 2.554738a53.666421 53.666421 0 0 0-41.451051 20.048773z" fill="#606060" p-id="28704"></path><path d="M1004.384333 0H463.575015C208.659514 0 0.000002 205.563373 0.000002 456.807495s208.574918 456.807495 463.575013 456.807495H1004.384333c254.93242 0 463.575013-205.580291 463.575013-456.807495S1259.249077 0 1004.384333 0z m96.572488 532.942077H753.258642c-10.67576 0-19.304346-17.037228-19.304346-38.067291s8.628586-38.067291 19.304346-38.067291H1100.821471c10.67576 0 19.304346 17.054146 19.304346 38.067291S1111.564906 532.942077 1100.821471 532.942077z m-19.38894-190.319537H386.323792a38.067291 38.067291 0 1 1 0-76.134583h695.244089a38.067291 38.067291 0 1 1 0 76.134583z" fill="#606060" p-id="28705"></path></svg><span class="collectSpan">站务中心</span></li>
                    <li class="collectLi"><svg t="1597731918152" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="30873" width="20" height="20"><path d="M246.613333 615.509333v166.826667h94.976v-153.6zM778.922667 615.509333v166.826667H683.946667v-153.6z" fill="#64EDAC" p-id="30874"></path><path d="M511.488 170.496c-168.874667 0-350.549333 116.138667-350.549333 371.2v251.733333c0 18.858667 15.274667 34.133333 34.133333 34.133334H301.056c37.632 0 68.266667-30.634667 68.266667-68.266667V700.586667c0-69.973333-56.917333-126.976-126.976-126.976h-13.141334v-32c0-209.237333 141.824-302.933333 282.282667-302.933334s282.282667 93.696 282.282667 302.933334v32h-13.141334c-69.973333 0-126.976 56.917333-126.976 126.976v58.709333c0 37.632 30.634667 68.266667 68.266667 68.266667h105.984c18.858667 0 34.133333-15.274667 34.133333-34.133334V541.781333c0-255.061333-181.76-371.285333-350.549333-371.285333z m-210.517333 588.8zM242.346667 641.962667c32.341333 0 58.709333 26.282667 58.709333 58.709333l-0.085333 58.709333h-71.765334V641.962667h13.141334z m551.424 117.333333H721.92V700.586667c0-32.341333 26.282667-58.709333 58.709333-58.709334h13.141334v117.418667zM887.381333 776.789333c-0.768 0-1.365333-0.597333-1.365333-1.365333V625.92c0-0.768 0.597333-1.365333 1.365333-1.365333h1.365334c36.266667 0 65.621333 29.354667 65.621333 65.621333v19.626667c-0.085333 36.864-30.208 66.986667-66.986667 66.986666zM137.984 776.789333c-37.546667 0-68.266667-30.72-68.266667-68.266666V692.906667c0-37.546667 30.72-68.266667 68.266667-68.266667v152.149333z" fill="#333C4F" p-id="30875"></path></svg><span class="collectSpan">帮助中心</span></li>
                    <li class="collectLi"><svg t="1597731942842" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="31265" width="20" height="20"><path d="M511.965867 1011.165867C236.7488 1011.165867 12.834133 787.217067 12.834133 512S236.7488 12.834133 511.965867 12.834133C787.217067 12.834133 1011.165867 236.782933 1011.165867 512s-223.9488 499.165867-499.2 499.165867z m0-930.0992C274.397867 81.066667 81.1008 274.397867 81.1008 512s193.297067 430.933333 430.865067 430.933333c237.636267 0 430.933333-193.297067 430.933333-430.933333 0-237.602133-193.297067-430.933333-430.933333-430.933333z" fill="" p-id="31266"></path><path d="M564.0192 758.4768c-135.918933 0-246.545067-110.523733-246.545067-246.4768 0-135.918933 110.592-246.510933 246.545067-246.510933 33.314133 0 65.604267 6.519467 96.017067 19.387733l-26.658134 62.8736A178.4832 178.4832 0 0 0 385.774933 512a178.449067 178.449067 0 0 0 178.2784 178.210133c32.085333 0 63.488-8.6016 90.794667-24.8832l34.9184 58.6752a245.9648 245.9648 0 0 1-125.7472 34.474667z" fill="" p-id="31267"></path></svg><span class="collectSpan">版权服务中心</span></li>
                </ul>
            </div>
        </div>    
    </div>
    
    
</div>

</div>

<div id="transform">
</div>
<div id="message">
    <h2 style="text-align: center;">写想法</h2>
    <p style="text-align: center;">哦豁script，请分享此刻的想法</p>
    <textarea name="" id="" cols="30" rows="10" style="height: 200px; width: 400px; text-align: center; margin-left: 50px; margin-top: 20px;"></textarea><br/>
    <input style="margin-top: 30px; width: 100px; height: 50px; background-color: wheat; position: relative; left: 50%; margin-left: -50px;" type="button" value="发布">
</div>  
</body>
</html>




